<template>
	<view class="content">
		<!-- <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#333"></uni-segmented-control> -->

		<view class="content-top">
			<view v-show="current === 0">
				<view class='cell-group'>
					<view class='cell-item cell-item-mid'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>银行卡号</view>
						</view>
						<view class='cell-item-bd'>
							<input type="number" class='cell-bd-input' v-model="cardNumber" focus @blur="checkCard()"
								placeholder='请输入银行卡号'></input>
						</view>
					</view>
					<view class='cell-item cell-item-mid'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>持卡人</view>
						</view>
						<view class='cell-item-bd'>
							<input type="text" class='cell-bd-input' v-model="name" placeholder='请输入持卡人姓名'></input>
						</view>
					</view>
					<view class='cell-item cell-item-mid'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>身份证</view>
						</view>
						<view class='cell-item-bd'>
							<input type="text" class='cell-bd-input' v-model="identity_card"
								placeholder='请输入持卡人身份证'></input>
						</view>
					</view>
					<view class='cell-item cell-item-mid'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>银行名称</view>
						</view>
						<view class='cell-item-bd'>
							<input type="text" class='cell-bd-input' :disabled="true" v-model="bankName"></input>
						</view>
					</view>
					<view class='cell-item cell-item-mid'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>银行卡类型</view>
						</view>
						<view class='cell-item-bd'>
							<input type="text" class='cell-bd-input' :disabled="true" v-model='cardTypeName'></input>
						</view>
					</view>
					<view class='cell-item cell-item-mid'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>开户行名</view>
						</view>
						<view class='cell-item-bd'>
							<input type="text" class='cell-bd-input' v-model="accountBank"
								placeholder='请输入开户银行名'></input>
						</view>
					</view>

					<view class='cell-item cell-item-mid right-img'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>开户行地址</view>
						</view>
						<view class='cell-item-bd'>
							<input :value="pickerValue" @focus="showThreePicker"></input>
							<area-picker ref="areaPicker" :areaId="areaId" :defaultIndex="defaultIndex"
								@onConfirm="onConfirm"></area-picker>
						</view>
						<view class='cell-item-ft'>
							<image class='cell-ft-next icon' src='/static/image/ic-pull-down.png'
								@click="showThreePicker">
							</image>
						</view>
					</view>

					<view class='cell-item cell-item-mid'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>用户手机号</view>
						</view>
						<view class='cell-item-bd' type="number" v-model="userInfo.phone">
							{{userInfo.phone}}
						</view>
					</view>
					<view class='cell-item cell-item-mid'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>短信验证码</view>
						</view>
						<view class='cell-item-bd'>
							<input class="cell-bd-input" type="number" v-model="code" placeholder="请输入验证码" />
							<view class="sendCodeBtn" @click="sendCode" v-if="verification">发送验证码</view>
							<view class="sendCodeBtn" v-if="!verification">{{ timer }}秒后重新</view>
						</view>
					</view>

					<view class='cell-item'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>设为默认</view>
						</view>
						<view @click="defaultChange">
							<view class='cell-item-ft'>
								<label class="radio">
									<radio value="1" :checked="checked" color="#333" />
								</label>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="current === 1">
				<view class='cell-group'>
					<view class='cell-item cell-item-mid'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>支付宝账号</view>
						</view>
						<view class='cell-item-bd'>
							<input type="number" class='cell-bd-input' v-model="alipay.accountBank" focus
								@blur="checkCard()" placeholder='请输入支付宝账号'></input>
						</view>
					</view>
					<view class='cell-item cell-item-mid'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>支付宝姓名</view>
						</view>
						<view class='cell-item-bd'>
							<input type="text" class='cell-bd-input' v-model="alipay.accountName"
								placeholder='支付宝姓名'></input>
						</view>
					</view>
					<view class='cell-item cell-item-mid'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>用户手机号</view>
						</view>
						<view class='cell-item-bd' type="number" v-model="userInfo.phone">
							{{userInfo.phone}}
						</view>
					</view>
					<view class='cell-item cell-item-mid'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>短信验证码</view>
						</view>
						<view class='cell-item-bd'>
							<input class="cell-bd-input" type="number" v-model="code" placeholder="请输入验证码" />
							<view class="sendCodeBtn" @click="sendCode" v-if="verification">发送验证码</view>
							<view class="sendCodeBtn" v-if="!verification">{{ timer }}秒后重新</view>
						</view>
					</view>

					<view class='cell-item'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>设为默认</view>
						</view>
						<view @click="defaultChange">
							<view class='cell-item-ft'>
								<label class="radio">
									<radio value="1" :checked="checked" color="#333" />
								</label>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="button-bottom">
			<button class="btn btn-square btn-b" @click="addCard" hover-class="btn-hover2" :disabled='submitStatus'
				:loading='submitStatus'>保存</button>
		</view>
	</view>

</template>

<script>
	import areaPicker from "@/components/area-picker/areaPicker.vue";
	export default {
		components: {
			areaPicker
		},
		data() {
			return {
				items: [
					'银行卡',
					'支付宝',
				],
				alipay: {
					accountBank: '', //支付宝账号
					accountName: '', //支付宝姓名
				},
				current: 0,
				bankName: '', // 银行名称
				cardType: 1, // 卡类型
				cardTypeName: '', // 卡片类型
				bankCode: '', // 银行缩写码
				accountBank: '', // 开户行
				cardNumber: '', // 银行卡号
				name: '', // 开户人姓名
				identity_card: '', //身份证号
				mobile: '', // 
				region: ['北京市', '北京市', '东城区'],
				areaId: 110101,
				address: '',
				is_def: 2,
				checked: false,
				pickerValue: '',
				defaultIndex: [0, 0, 0],
				submitStatus: false,
				userInfo: { //本人信息
					phone: '', //本人电话（展示）
				},
				smsMobile: '',
				verification: true, // 通过v-show控制显示获取还是倒计时
				timer: null,
				code: '', // 短信验证码
			}
		},
		computed: {},
		methods: {
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
			},
			sendCode() {
				this.$common.loadToShow('发送中...');
				setTimeout(() => {
					this.$common.loadToHide();
					this.$api.sms({
						mobile: this.smsMobile,
						code: 'veri'
					}, res => {
						if (res.status) {
							this.timer = 60;
							this.verification = false;
							this.$common.successToShow(res.msg);
							this.countDown(); // 执行验证码计时
							// this.btnb = 'btn btn-square btn-all btn-b';
						} else {
							this.$common.errorToShow(res.msg);
						}
					});
				}, 1000);
			},
			// 验证码倒计时
			countDown() {
				let auth_timer = setInterval(() => {
					// 定时器设置每秒递减
					this.timer--; // 递减时间
					uni.setStorage({
						key: 'timer',
						data: this.timer,
						success: function() {}
					});
					if (this.timer <= 0) {
						this.verification = true; // 60s时间结束还原v-show状态并清除定时器
						clearInterval(auth_timer);
					}
				}, 1000);
			},
			// 省市区联动初始化
			showThreePicker() {
				this.$refs.areaPicker.showPicker();
			},
			// 选择收货地址
			onConfirm(e) {
				let province_name = e[0].name;
				let city_name = e[1].name;
				let county_name = e[2].name;
				this.pickerValue = e[0].name + " " + e[1].name + " " + e[2].name
				let data = {
					province_name: province_name,
					city_name: city_name,
					county_name: county_name
				}
				let regionName = [province_name, city_name, county_name];
				this.$api.getAreaId(data, res => {
					if (res.status) {
						this.areaId = res.data
					} else {
						uni.showModal({
							title: '提示',
							content: '地区选择出现问题，请重新选择地区',
							showCancel: false
						});
					}
				});
			},
			// 选择/取消默认
			defaultChange() {
				this.checked = !this.checked
				this.is_def = this.is_def === 1 ? 2 : 1
			},
			//存储收货地址
			saveShip() {
				if (this.id && this.id != 0) {
					//编辑存储
					let data = {
						'id': this.id,
						'name': this.name,
						'address': this.address,
						'mobile': this.mobile,
						'is_def': this.is_def
					}

					data['area_id'] = this.areaId,
						this.$api.editShip(data, res => {
							if (res.status) {
								this.$common.successToShow('编辑成功', function() {
									uni.navigateBack({
										delta: 1
									});
								});
							} else {
								this.$common.errorToShow(res.msg);
							}
						});
				} else {
					//添加
					let data = {
						'area_id': this.areaId,
						'name': this.name,
						'address': this.address,
						'mobile': this.mobile,
						'is_def': this.is_def
					}
					this.$api.saveUserShip(data, res => {
						if (res.status) {
							this.$common.successToShow('添加成功', function() {
								uni.navigateBack({
									delta: 1
								});
							});
						} else {
							this.$common.errorToShow(res.msg);
						}
					});
				}
			},
			// 判断获取银行卡类型
			checkCard() {
				
				console.log(12344)
				
				if (this.cardNumber) {
					let data = {
						card_code: this.cardNumber
					}
					this.$api.getBankCardOrganization(data, res => {
						if (res.status) {
							let data = res.data
							this.bankName = data.name
							this.cardType = data.type
							this.bankCode = data.bank_code
							this.cardTypeName = data.type_name
						} else {
							this.$common.errorToShow(res.msg, () => {
								this.bankCode = this.bankName = this.cardType = this
									.cardTypeName = ''
							})
						}
					})
				} else {
					this.bankCode = this.bankName = this.cardType = this.cardTypeName = ''
				}
			},
			// 添加银行卡  
			addCard() {
				if (this.current == 0) {
					if (!this.cardNumber) {
						this.$common.errorToShow('请输入银行卡号')
					} else if (!this.bankName || !this.cardType || !this.bankCode) {
						this.$common.errorToShow('请输入正确的银行卡号')
					} else if (!/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,30}$/.test(this.name)) {
						this.$common.errorToShow('请输入正确的持卡人名称')
					} else if (!
						/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
						.test(this.identity_card)) {
						this.$common.errorToShow('请输入正确身份证号')
					} else if (!this.areaId) {
						this.$common.errorToShow('请选择开户行所在地区')
					} else if (!this.accountBank) {
						this.$common.errorToShow('请输入开户银行信息')
					} else if (!this.code) {
						this.$common.errorToShow('请输入短信验证码')
					} else {
						this.submitStatus = true;
						let data = {
							bankName: this.bankName,
							areaId: this.areaId,
							accountBank: this.accountBank,
							accountName: this.name,
							bankCode: this.bankCode,
							cardNumber: this.cardNumber,
							cardType: this.cardType,
							isDefault: this.is_def,
							identity: this.identity_card,
							smsMobile: this.smsMobile,
							code: this.code
						}

						this.$api.addBankCard(data, res => {
							if (res.status) {
								this.$common.successToShow(res.msg, ress => {
									// this.submitStatus = false;
									uni.navigateBack({
										delta: 1
									});
								})
							} else {
								this.$common.errorToShow(res.msg);
							}
						}, res => {
							this.submitStatus = false;
						})
					}
				} else if (this.current == 1) {
					if (!this.alipay.accountBank) {
						this.$common.errorToShow('请输入支付宝账号')
					} else if (!this.alipay.accountName) {
						this.$common.errorToShow('请输入支付宝实名认证名称')
					} else if (!this.code) {
						this.$common.errorToShow('请输入短信验证码')
					} else {
						this.submitStatus = true;
						let data = {
							accountBank: this.alipay.accountBank,
							accountName: this.alipay.accountName,
							smsMobile: this.smsMobile,
							code: this.code
						}
						this.$api.addalipay(data, res => {
							if (res.status) {
								this.$common.successToShow(res.msg, ress => {
									// this.submitStatus = false;
									uni.navigateBack({
										delta: 1
									});
								})
							} else {
								this.$common.errorToShow(res.msg);
							}
						}, res => {
							this.submitStatus = false;
						})
					}
				}
			},
			// #ifdef MP-ALIPAY
			// alipay bank
			aliPayBank() {
				if (this.cardNumber.length >= 16 && this.cardNumber.length <= 19) {
					let data = {
						card_code: this.cardNumber
					}
					this.$api.getBankCardOrganization(data, res => {
						if (res.status) {
							let data = res.data
							this.bankName = data.name
							this.cardType = data.type
							this.bankCode = data.bank_code
							this.cardTypeName = data.type_name
						} else {
							this.$common.errorToShow(res.msg, () => {
								this.bankCode = this.bankName = this.cardType = this
									.cardTypeName = ''
							});
						}
					})
				} else {
					this.bankCode = this.bankName = this.cardType = this.cardTypeName = ''
				}
			}
			// #endif
		},
		onLoad(e) {
			if (e.ship_id) {
				//编辑
				this.id = e.ship_id;
				this.getShipInfo();
			} else {
				//添加
				this.pickerValue = "请选择省市区"; //this.region[0]+ " "+ this.region[1]+" "+this.region[2];
			}
			//没有地区信息时，再拉一次
			if (!this.$db.get('areaList')) {
				//获取地区信息
				this.$api.getAreaList({}, res => {
					if (res.status) {
						this.$db.set('areaList', res.data)
					}
				});
			}

			//拿手机号
			var _this = this;
			_this.$api.userInfo({}, function(res) {
				if (res.status) {
					let mphone = res.data.mobile.substring(0, 3) + '****' + res.data.mobile.substring(
						7);
					_this.userInfo.phone = mphone || '暂无手机号';
					_this.smsMobile = res.data.mobile || '暂无手机号';
				} else {
					//报错了
					_this.$common.errorToShow(res.msg);
				}
			});
		},
		onBackPress() {
			if (this.$refs.areaPicker.pickerShow) {
				this.$refs.areaPicker.closePicker();
				return true;
			}
		},
		// #ifdef MP-ALIPAY
		watch: {
			cardNumber() {
				this.$common.throttle(this.aliPayBank, this, 450);
			}
		},
		// #endif
	}
</script>

<style>
	.user-head {
		height: 100upx;
	}

	.user-head-img {
		height: 90upx;
		width: 90upx;
		border-radius: 50%;
	}

	.cell-hd-title {
		color: #333;
	}

	.cell-item-hd {
		width: 180rpx;
	}

	.cell-item-bd {
		color: #666;
		font-size: 26upx;
	}

	.button-bottom .btn {
		width: 50%;
	}

	.right-img .cell-item-ft {
		right: 26rpx;
	}

	/* #ifdef MP-ALIPAY */
	input {
		font-size: 24upx;
	}

	/* #endif */
</style>
